<template>
	<view class="tagController">
		<view class="tagContainer">
			<view class="tagItem" :class="tagBgColor" v-bind:key="index" v-for="(tagText,index) in tagList">
				<text @tap="tapTag" :data-text="tagText">{{tagText}}</text>
				<text v-if="isShowDelIcon" class="tagDelIcon" @tap="delTag" :data-text="tagText">×</text>
			</view>
		</view>
		<view class="tagInput" v-if="isShowAdd">
			<view class="add-input-box">
				<input type="text" v-model="tagString" placeholder="输入你经营产品或行业" />
				<view class="add-numbox"><text>{{tagString.length}}</text>/<text>30</text></view>
			</view>
			<view class="add-btn-box">
				<button type="default" @tap="createTags" class="button">+添加</button>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: 'robby-tags',
		props: ['enableDel', 'bgColorType', 'tagList', 'enableAdd'],
		data() {
			return {
				tagString: '',
				isShowDelIcon: this.enableDel || false,
				isShowAdd: this.enableAdd || false
			}
		},
		computed: {
			tagBgColor: function() {
				if (this.bgColorType === null) {
					return 'tagBgDefault'
				} else if (this.bgColorType === 'primary') {
					return 'tagBgPrimary'
				} else if (this.bgColorType === 'success') {
					return 'tagBgSuccess'
				} else if (this.bgColorType === 'warn') {
					return 'tagBgWarning'
				} else if (this.bgColorType === 'error') {
					return 'tagBgError'
				} else {
					return 'tagBgDefault'
				}
			}
		},
		methods: {
			createTags: function() {
				let tempTagArr = []
				if (this.tagList.length >= 10) {
					uni.showToast({
						title: "最多添加10组关键字",
						icon: "none"
					})
					return false;
				}
				if (this.tagString.length > 30) {
					uni.showToast({
						title: "每个关键字不能超过30个字符",
						icon: "none"
					})
					return false;
				} else if (this.tagString.length > 0) {
					let newvalue = this.tagString.split(/,|，/)
					for (let i = 0; i < newvalue.length; i++) {
						let newTag = newvalue[i].trim()
						if (newTag !== '' && this.tagList.indexOf(newTag) < 0) {
							tempTagArr.push(newTag)
							if ((this.tagList.toString() + newTag + ',').length > 80) {
								uni.showToast({
									title: "所有的关键词总长度不能超过" + (this.tagList.toString() + newTag + ',').length + "/80个字",
									icon: "none"
								});
								return false;
							}
							if (this.tagList.length < 10)
								this.tagList.push(newTag)
						}
					}
					this.$emit("loadTuijian", this.tagString);
				}

				this.tagString = ''
				//this.tagList.splice(this.tagList.length, 0, ...tempTagArr)
				this.$emit('add', {
					currentTag: tempTagArr,
					allTags: this.tagList
				})
				this.$emit('input', this.tagList)
			},
			delTag: function(e) {
				let delTagText = e.currentTarget.dataset.text
				let delTagIndex = this.tagList.indexOf(delTagText)
				this.tagList.splice(delTagIndex, 1)
				this.$emit("delete", {
					currentTag: delTagText,
					allTags: this.tagList
				})
				this.$emit('input', this.tagList)
			},
			tapTag: function(e) {
				let selTagText = e.currentTarget.dataset.text
				this.$emit("click", selTagText)
			},
			tuijianCreateTag: function(word) {
				let tempTagArr = []
				if (this.tagList.length >= 10) {
					uni.showToast({
						title: "最多添加10组关键词",
						icon: "none"
					})
					return false;
				}
				if (word.length > 0) {
					let newvalue = word.split(/,|，/)
					for (let i = 0; i < newvalue.length; i++) {
						let newTag = newvalue[i].trim()
						if (newTag !== '' && this.tagList.indexOf(newTag) < 0) {
							tempTagArr.push(newTag)
							if (this.tagList.length < 10)
								this.tagList.push(newTag)
						}
					}
				}
				this.$emit('add', {
					currentTag: tempTagArr,
					allTags: this.tagList
				})
				this.$emit('input', this.tagList)
			}
		}
	}
</script>

<style lang="scss">
	.tagController {
		padding: 0 20rpx 10rpx;
	}

	.tagContainer {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.tagItem {
		padding: 10upx 20upx;
		margin: 0 15rpx 15rpx 0;
		border-radius: 10rpx;
		color: white;
	}

	.tagBgDefault {
		background-color: #3b8bfe;
		color: #fff;
		font-size: 28rpx;
	}

	.tagBgPrimary {
		background-color: #007aff;
	}

	.tagDelIcon {
		padding-left: 20rpx;
	}

	.tagInput {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;

		.add-input-box {
			display: flex;
			flex-direction: row;
			padding: 0rpx 25rpx;
			border: 1px solid #e3e3e3;
			border-radius: 10rpx;
			border-right: 0;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			color: #333;
			flex: 1 1 0%;
			height: 80rpx;
			box-sizing: border-box;
			align-items: center;
			font-size: 28rpx;

			input {
				font-size: 28rpx;
				flex: 1 1 0%;
			}
		}
	}

	.add-numbox {
		font-size: 28rpx;
		color: #a9a9a9;
	}

	.add-btn-box {
		.button {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			font-size: 30rpx;
			background-color: #3b8bfe;
			line-height: 0;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
		}
	}
</style>
